import React, { Component } from 'react';
import styles from './common.css';
import { Divider, List} from 'antd';

const data = [
  (<p>（1）为了满足企业对管理员不同功能的需求，我们暂时为企业制定了两种角色的管理员：<span>管理员/考勤员</span>。</p>),
  (<div>
    <p><span>考勤员</span>：对工作进行签到、签退、未到、未完的考勤操作。</p>
    <p><span>管理员</span>：拥有考勤员的全部能力；此外，管理员还可以发布职位、修改职位、录用兼职员、向兼职员发放工资。</p>
  </div>),
  (<p>（2）一个企业可以拥有多个管理员和多个考勤员：</p>),
  (<div>
    <p>管理员之间互相看不到各自发布的职位，也没有权限管理其他管理员发布的职位以及对应的工作。</p>
    <p>考勤员只能看到和操作管理员分派给考勤员的职位。</p>
  </div>),
  (<p>（3）新用户访问了兼职管理小程序后，默认角色是<span>访客</span>，除了完善个人信息没有任何权限。</p>),
  (<p>（4）企业可以通过本网站的<span>用户管理->管理员管理</span>菜单通过手机号搜到所有的访客。企业可以将搜索到的访客设置为企业的管理员或者考勤员。在<span>用户管理->管理员管理</span>菜单下半页企业可以改变管理员的角色。</p>),
];

export default class AccountManagement extends Component {

  render() {
    return(
      <div className={styles.content}>
        <div className={styles.header}>管理员角色说明</div>
        <Divider />
        <List
          size={'large'}
          dataSource={data}
          renderItem={item => 
            (<List.Item>
              <div className={styles.text}>{item}</div>
            </List.Item>)
          }
          split={false}
        />
      </div>
    );
  }
};